<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户识别记录</title>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet" href="/static/user_records.css">
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-title">
                智能工业手势识别
            </div>
            <div class="user-info">
                <span class="username">{{ current_user.username }}</span>
                <a href="{{ url_for('auth.logout_route') }}" class="logout">退出登录</a>
            </div>
        </div>
        <ul class="nav-menu">
            <li class="nav-item" onclick="window.location.href='{{ url_for('user.user_management') }}'">角色管理</li>
            <li class="nav-item active">识别记录</li>
        </ul>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="main-container">
            <div class="records-header">
                <h1>用户识别记录</h1>
                <div class="filter-section">
                    <select id="userFilter" class="filter-select" onchange="filterRecords()">
                        <option value="all">所有用户</option>
                        {% for user in users %}
                        <option value="{{ user.id }}">{{ user.username }}</option>
                        {% endfor %}
                    </select>
                    <button class="export-btn" onclick="exportRecords()">
                        <i class="fas fa-download"></i>
                        导出记录
                    </button>
                </div>
            </div>

            <div class="records-container">
                <div class="records-list">
                    {% for record in records %}
                    <div class="record-item" data-user-id="{{ record.user_id }}">
                        <div class="record-header">
                            <span class="record-user">{{ record.username }}</span>
                            <span class="record-time">{{ record.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
                        </div>
                        <div class="record-content">
                            <div class="gesture-info">
                                <span class="gesture-label">手势</span>
                                <span class="gesture-value">{{ record.gesture }}</span>
                            </div>
                            <div class="action-info">
                                <span class="action-label">指令</span>
                                <span class="action-value">{{ record.content }}</span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <script>
        function filterRecords() {
            const userId = document.getElementById('userFilter').value;
            const records = document.querySelectorAll('.record-item');
            
            records.forEach(record => {
                if (userId === 'all' || record.dataset.userId === userId) {
                    record.style.display = 'block';
                } else {
                    record.style.display = 'none';
                }
            });
        }

        function exportRecords() {
            const userId = document.getElementById('userFilter').value;
            window.location.href = `{{ url_for('user.export_history_route') }}?user_id=${userId}`;
        }
    </script>
</body>
</html> 